import React, { Component, Fragment } from 'react';
import { Dispatch } from 'redux';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import PageHeader from '@/components/PageHeader';
import { getAddressNameByCode } from '@/utils/utils';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  Card, Badge, Descriptions, Timeline,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

const { Item } = Descriptions;

interface VIPUserManagementDetailProps extends FormComponentProps {
  dispatch: Dispatch;
  detailInfo: any;
  loading: boolean;
  location: { query: any };
}

interface VIPUserManagementDetailState {}

@connect(({
  VIPUserManagementDetail: { detailInfo },
}: any) => ({ detailInfo }))
class VIPUserManagementDetailInfoElem extends Component<VIPUserManagementDetailProps,
VIPUserManagementDetailState> {
  componentDidMount() {
    const { location: { query: { id } } } = this.props;
    this.fetchDetailInfo(id);
  }

  componentDidUpdate(prevProps: any) {
    const {
      location: { query: { id } },
    } = this.props;
    if (prevProps.location.query.id !== id) {
      this.fetchDetailInfo(id);
    }
  }

  fetchDetailInfo = (id: number) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'VIPUserManagementDetail/fetch',
      payload: { id, loadUser: 1 },
    });
  };

  renderLogsInfo = (detailInfo: any) => (
    <Timeline>
      <Timeline.Item>最近操作人：{detailInfo.updateUserName}</Timeline.Item>
      <Timeline.Item>最近操作时间：{detailInfo.updateTime}</Timeline.Item>
      <Timeline.Item>创建人：{detailInfo.createUserName}</Timeline.Item>
      <Timeline.Item>创建时间：{detailInfo.createTime}</Timeline.Item>
    </Timeline>
  );

  render() {
    const { detailInfo } = this.props;
    const discount = detailInfo.discount ? JSON.parse(detailInfo.discount) : [];
    const newDiscountList = discount.reverse();
    return (
      <Fragment>
        <PageHeader />

        <Card
          bordered={false}
          title="详情信息"
          className="paddingB20"
        >
          <Descriptions
            bordered
            size="small"
            className="marginB8"
          >
            <Item label="商户名称">{detailInfo.name}</Item>
            <Item label=" 联系人">{detailInfo.contact}</Item>
            <Item label=" 手机号">{detailInfo.phone}</Item>
            <Item label="省/市/区">
              {getAddressNameByCode({
                pareaCode: detailInfo.pareaCode,
                caredCode: detailInfo.careaCode,
                dareaCode: detailInfo.dareaCode,
              })}
            </Item>
            <Item label="详细地址">{detailInfo.address}</Item>
            <Item label="商户ID">{detailInfo.id}</Item>
            <Item label="VIP商户编号">{detailInfo.vipCode}</Item>
            <Item label="启用状态">{detailInfo.statusName}</Item>
            <Item label=" 有效期">
              {detailInfo.startTime && detailInfo.startTime.split(' ')[0]}{' '}
              {detailInfo.startTime && '至'}{' '}
              {detailInfo.endTime && detailInfo.endTime.split(' ')[0]}
            </Item>
            <Item label="结算周期">{detailInfo.settleCycleName}</Item>
            <Item label="折扣方案">{detailInfo.settleTypeName} </Item>
          </Descriptions>

          <div className="flexLView">
            <div>揽件阶梯设置:</div>
            <div style={{ flex: 1, paddingLeft: '4px', color: 'rgba(0, 0, 0, 0.85)' }}>
              {newDiscountList.length > 0
                ? newDiscountList.map((item: any, index: number) => (
                  <div key={item.id} style={{ display: 'inline', marginRight: '10px' }}>
                    <Badge
                      count={index + 1}
                      style={{ backgroundColor: '#1890FF', color: '#fff', marginRight: '6px' }}
                    />
                    <span>{item.startCount}</span> ～
                    <span>{item.endCount === 0 ? '' : item.endCount}</span>
                    <span className="marginL16">{(item.discount / 100).toFixed(2)}</span>
                  </div>
                ))
                : '暂无'}
            </div>
          </div>
        </Card>

        <Card bordered={false} title="日志信息">
          {this.renderLogsInfo(detailInfo)}
        </Card>
      </Fragment>
    );
  }
}

export default Form.create<VIPUserManagementDetailProps>()(VIPUserManagementDetailInfoElem);
